<!-- 模型训练页面 -->
<template>
    <div class="routings">
      <div class="tab-container">
        <div>
          <!-- 标签页选项卡 -->
        <div class="tab" @click="openTab($event, 'tab1')">AIE-SEG 定制模型</div>
        <div class="tab" @click="openTab($event, 'tab2')">自建模型</div>
        <div class="tab" @click="openTab($event, 'tab3')">预置样本</div>
        </div>
        <div class="research">  
            <el-row gutter="20">
                <el-col :span="4">
                  <el-form-item label="模型名称">
                    <el-input v-model="nameInput"  placeholder="请输入">
                      <template #append>
                        <el-button>
                          <el-icon><Search /></el-icon>
                        </el-button>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="模型类型">
                    <el-select v-model="value" placeholder="请选择" clearable>
                      <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="创建时间">
                    <el-date-picker
                      type="date"
                      v-model="time"
                      value-format="YYYY-MM-DD"
                      placeholder="请选择创建日期"
                    />
                  </el-form-item>
                </el-col>
                
                <el-col span="4" v-if="currentTab == 'tab1'" >    
                    <el-button type="primary" class="createNew1" style=" right: 20px;">
                        新建定制模型
                    </el-button>
                    <el-button  type="primary" class="check" style=" right: 250px;">
                        查看网络结构
                    </el-button>
                </el-col>
                <el-col span="4" v-else-if="currentTab == 'tab2'">
                    <el-button  type="primary" class="createNew1"style=" right: 20px;">
                        新建训练模型
                    </el-button>
                    <el-button  type="primary" class="check" style=" right: 250px;">
                        查看网络结构
                    </el-button>
                </el-col>
                <el-col span="4" v-else>
                    <el-button  type="primary" class="check" style=" right: 20px;">
                        查看网络结构
                    </el-button>
                </el-col>
                
            </el-row>
        <!-- 标签页内容 -->
        </div>
        <div id="tab1" class="tab-content">
          <!-- 标签一内容 -->
              <div class="empty">
                <img  style="display: block;"src="//g.alicdn.com/aie/portal/1.4.3/console-main/images/40aa40546eb56d670192.svg">
                <span class="texts" style="display: block;">基于 AI Earth遥感AI解译通用分割模型(AIE-SEG),利用少量样本数</span>
                <span class="texts" style="display: block;">据，快速微调生成专属定制模型</span>
                <el-button type="primary" class="createNew2" >新建定制模型</el-button>
              </div>
        </div>
        <div id="tab2" class="tab-content">
            <!-- 标签二内容 -->
            <div class="empty">
                <img  style="display: block;"src="//g.alicdn.com/aie/portal/1.4.3/console-main/images/40aa40546eb56d670192.svg">
                <span class="texts" style="display: block;">暂无数据</span>
              </div>
        </div>
        <div id="tab3" class="tab-content">
          <div class="box-container" style="display: flex;flex-wrap: wrap;">
            <div class="box" v-for="(value) in list" 
            style="background-color: rgb(32, 35, 38); width: 20%;height: 30vh; padding: 15px; ">
                <div class="box-header" style="flex:3">
                    <div class="inter">
                        <input type="checkbox">
                        <p>版本数量:{{ value.versionCount }}</p>
                    </div>
                    <div class="images">
                        <img src="" alt="">
                    </div>
                </div>
                <div class="box-body" style="border-bottom: 1px solid grey;flex:1">
                    <div class="name" style="font-size: 1.2em; margin-bottom: 4px;">
                        <p>{{value.modelName}}</p>
                    </div>
                    <div class="information" style="font-size: 0.9em;margin-bottom: 3px;">
                        <p>模型类型: {{value.modelType}}</p>
                        <p>创建时间: {{ value.createTime }}</p>
                    </div>
                </div>
                <div class="box-foot" style="flex:1">
                    <div class="btn" >
                        <el-button class="details-btn">详情</el-button>
                        <el-button class="newVer-btn">新建版本</el-button>
                    </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted,reactive } from 'vue';   
  const nameInput = ref('');
  const time = ref('');
  const value = ref('');
  const currentTab = ref('tab1');//默认第一个
  const option = [
    { value: "1", label: "地物识别" },
    { value: "0", label: "地物分类" },
  ];
  const list = reactive([
    {   
        versionCount:1,
        modelName:"模型1",
        modelType:"类型1",
        createTime:"2023-05-31",
    },
    {
        versionCount:2,
        modelName:"模型2",
        modelType:"类型2",
        createTime:"2023-05-1",
    },
    {
        versionCount:3,
        modelName:"模型3",
        modelType:"类型3",
        createTime:"2023-05-2",
    },
    {
        versionCount:4,
        modelName:"模型4",
        modelType:"类型4",
        createTime:"2023-05-2",
    },
    {
        versionCount:5,
        modelName:"模型5",
        modelType:"类型5",
        createTime:"2023-05-2",
    },
    {
        versionCount:6,
        modelName:"模型6",
        modelType:"类型6",
        createTime:"2023-05-2",
    }
  ])
  
  
 //打开标签页的函数
  function openTab(event: { currentTarget: { className: string; }; }, tabName: string) {
    currentTab.value= tabName;

    const tabContent = document.getElementsByClassName("tab-content");
    for (let i = 0; i < tabContent.length; i++) {
      (tabContent[i] as HTMLElement).style.display = "none";
    }
  
    const tabs = document.getElementsByClassName("tab");
    for (let i = 0; i < tabs.length; i++) {
      tabs[i].classList.remove("active");
    }
  
    document.getElementById(tabName).style.display = "block";
    event.currentTarget.classList.add("active");
  }
  
  // 页面加载后默认选中第一个标签
  onMounted(() => {
    const firstTab = document.getElementsByClassName('tab')[0];
    firstTab.classList.add('active');
    document.getElementById('tab1').style.display = 'block';
  });
</script>

<style lang="scss" scoped>
     /* 导航栏容器 */
  .routings {
    width: 95%;
    height: 95%;
   // border: 1px solid rgb(70, 211, 95);
    margin: 15px;
    //position: relative;
  }
  
  /* 设置标签页外层容器样式 */
  .tab-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  /* 设置标签页选项卡的样式 */
  .tab {
    float: left;
    padding: 8px 16px;
    background-color: #17181a;
    color: #bababb;
    cursor: pointer;
  }
  /* 设置选中的标签页样式 */
  .active {
    color: #4584ff;
    border-bottom: 2px solid #4584ff;
  }
  /* 搜索框容器 */
  .research {
    width: 100%;
    height: 8vh;
   //border: 1px solid rgb(217, 28, 238);
    margin-top: 60px;
  }
  // 输入框
  ::v-deep .el-input__wrapper{
    background-color: rgb(12,14,18);
    box-shadow:   0 0 0 1px  rgb(47,50,56);
    }
    //搜索按钮
    ::v-deep .el-input-group__append{
        background-color: rgb(12,14,18 );
        box-shadow:   0 0 0 1px  rgb(47,50,56);
    }
    //选择框
    ::v-deep .el-select__wrapper{
        background-color: rgb(12,14,18);
        box-shadow:   0 0 0 1px  rgb(47,50,56);
    }
    .createNew1{
        position: absolute;
        background-color: #4584ff;
        width: 200px;
    }
    .createNew2{
        margin-top: 10px;
        background-color: #4584ff;
        width: 150px;
    }
    .el-button--primary{
        --el-button-border-color: #3d444f;
        --el-button-bg-color: #3d444f;
    }
    .check{
        position: absolute;
        width: 200px;
    }
  /* 设置标签页内容的样式 */
  .tab-content {
    //position: relative;
    display: none;
    padding: 16px;
    color: #bababb;
    height: 70vh;
  }

  .empty {
    position: absolute; 
    //margin-top: 20vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;  
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .texts {
    color: rgb(100,101,104);
    text-align : center
  }

  .box{
    display: flex;
    flex-direction: column;
    margin: 10px;
  }
  .box:hover{
      background-color: red;
  }
  .box-header{
    position: relative;
    background-color: #17181a;
    height: 60%;
  }
  
  .header input{
    position: absolute;
    left: 1px;
  }
  .inter p{
    position: absolute;
    right: 1px;
  }
  .images img{      
    position: absolute;
    top: 50%;
    left: 50%    ;
    transform: translate(-50%, -50%);
    width: 6vw;
  }
  .btn{
    height: 100%;
    width: 100%;
  }
  
  .btn .details-btn,.newVer-btn{
   height: 100%;
   width: 40%;
   background-color: rgb(32, 35, 38);
   border: rgb(32, 35, 38);
   color: rgb(100,101,104);
  }
  .btn .details-btn{
    border-right: rgb(100,101,104)!important;
  }
  .newVer-btn :hover{
    color: rgb(196,199,202);
  }
  .details-btn :hover{
    color: rgb(196,199,202);
  }
</style>